import React, { Component } from "react";
import { Modal, Form, Input, Select } from "antd";

const Option = Select.Option;
const FormItem = Form.Item;
const TextArea = Input.TextArea;

class ApiEdit extends Component {
  handleOk = () => {
    this.props.form.validateFields((err, values) => {
      console.log(values);
      if (!err) {
        this.props.handleOk(values);
      }
    });
  };
  formItemLayout = {
    labelCol: {
      sm: { span: 4 }
    },
    wrapperCol: {
      sm: { span: 18 }
    }
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Modal
        width="680PX"
        title="Create API"
        visible={this.props.visible}
        onOk={this.handleOk}
        onCancel={this.props.handleCancel}
      >
        <Form className="login-form">
          <FormItem label="URL：" {...this.formItemLayout}>
            {getFieldDecorator("url", {
              rules: [{ required: true, message: "url为必填" }]
            })(<Input placeholder="Request url" />)}
          </FormItem>
          <FormItem label="Method：" {...this.formItemLayout}>
            {getFieldDecorator("method", {
              rules: [{ required: true, message: "请选择请求方式" }]
            })(
              <Select placeholder="Request method">
                <Option value="GET">GET</Option>
                <Option value="POST">POST</Option>
                <Option value="PUT">PUT</Option>
                <Option value="DELETE">DELETE</Option>
              </Select>
            )}
          </FormItem>
          <FormItem label="Response：" {...this.formItemLayout}>
            {getFieldDecorator("response", {
              rules: [
                {
                  required: true,
                  message: "请输入返回值"
                },
                {
                  validator(rule, val, callback) {
                    try {
                      let s = JSON.parse(val);
                      callback();
                    } catch (err) {
                      callback("Response 必须是json");
                    }
                  }
                }
              ]
            })(
              <TextArea
                autosize={{ minRows: 8, maxRows: 8 }}
                placeholder={`The return value you want
      example:
        {
          res: 'SUCCESS'
          data: {},
          message: '成功'
        }
                `}
              />
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(ApiEdit);
